<template>
  <el-row>
    <el-col :span="5">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="19">
      <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :permission="permissionList"
                   @row-del="rowDel"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   :before-open="beforeOpen"
                   :page="page"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"

                   @on-load="onLoad"
                   @cell-click="handleCell"
                   :cell-class-name="addClass">
          <template slot-scope="{row}"
                    slot="tenantName">
            <el-tag>{{row.tenantName}}</el-tag>
          </template>
          <template slot-scope="{row}"
                    slot="roleName">
            <el-tag>{{row.roleName}}</el-tag>
          </template>
          <template slot-scope="{row}"
                    slot="deptName">
            <el-tag>{{row.deptName}}</el-tag>
          </template>
        </avue-crud>
        <!-- 巡查记录 -->
        <!-- <el-dialog title="巡查记录"
                  append-to-body
                  :visible.sync="patrolRecordBox"
                  width="60%">
          <avue-form :option="patrolRecordOption" v-model="patrolRecordForm" @submit="handleAllocationSave"/>
        </el-dialog> -->
        <!-- <el-drawer :title="巡查记录" :visible.sync="patrolRecordBox" :direction="direction"
                append-to-body
                size="1000px"> -->
        <el-dialog :title="巡查记录" append-to-body :visible.sync="patrolRecordBox" :before-close="handleDrawerClose"
                width="80%">
        <avue-crud :option="patrolRecordOption"
                  :data="dataScope"
                  :page="pageScope"
                  v-model="patrolRecordForm"
                  ref="crudScope"

                  :before-open="beforeOpenScope"
                  @search-change="searchChangeScope"
                  @search-reset="searchResetScope"
                  @selection-change="selectionChangeScope"
                  @current-change="currentChangeScope"
                  @size-change="sizeChangeScope"
                  @on-load="onLoadScope">
        </avue-crud>
        </el-dialog>
      <!-- </el-drawer> -->
      <!--上报事件-->
      <!-- <el-drawer :title="上报事件记录" :visible.sync="conflictsBox" :direction="direction"
                append-to-body
               :before-close="handleDrawerClose" size="1000px" > -->
               <el-dialog :title="上报事件记录" append-to-body :visible.sync="conflictsBox" :before-close="handleDrawerClose"
                width="80%">
        <avue-crud :option="conflictsOption"
                  :data="dataScope2"
                  :page="pageScope2"
                  v-model="conflictsForm"
                  ref="crudScope"

                  :before-open="beforeOpenScope"
                  @search-change="searchChangeScope"
                  @search-reset="searchResetScope"
                  @selection-change="selectionChangeScope"
                  @current-change="currentChangeScope"
                  @size-change="sizeChangeScope"
                  @on-load="onLoadScope2">
        </avue-crud>
               </el-dialog>
      <!-- </el-drawer> -->
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
  import {getList,getPatrolList,getConflictsList} from "@/api/xapply/grid/userNormal";
  import {getDeptTree, getDeptLazyTree} from "@/api/system/dept";
  import {getRoleTree} from "@/api/system/role";
  import {mapGetters} from "vuex";
  import website from '@/config/website';

  export default {
    data() {
      return {
        form: {},
        roleBox: false,
        excelBox: false,
        initFlag: true,
        patrolRecordBox: false,
        conflictsBox: false,
        selectionList: [],
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        init: {
          roleTree: [],
          deptTree: [],
        },
        props: {
          label: "title",
          value: "key"
        },
        roleGrantList: [],
        roleTreeObj: [],
        treeDeptId: '',
        treeData: [],
        treeOption: {
          nodeKey: 'id',
          lazy: true,
          treeLoad: function (node, resolve) {
            const parentId = (node.level === 0) ? 0 : node.data.id;
            getDeptLazyTree(parentId).then(res => {
              resolve(res.data.data.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                }
              }))
            });
          },
          addBtn: false,
          menu: false,
          size: 'small',
          props: {
            labelText: '标题',
            label: 'title',
            value: 'value',
            children: 'children'
          }
        },

        option: {
          indexLabel: "序号",
          menu: false,
          selection:false,
          height: 'auto',
          calcHeight: 180,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          addBtn: false,
          editBtn: false,
          delBtn:false,
          dialogClickModal: false,

          column: [

             {
                  label: "组织部门",
                  prop: "deptId",
                  type: "tree",
                  hide: true,
                  parent: true,
                  dicData: [],
                  props: {
                    label: "title"
                  },
                  slot: true,

                },
                {
                  label: "登录账号",
                  prop: "account",
                  search: true,
                  rules: [{
                    required: true,
                    message: "请输入登录账号",
                    trigger: "blur"
                  }],
                },

                {
                  label: "角色名称",
                  prop: "roleName",
                  slot: true,
                  display: false,
                  hide:true,
                },
                {
                  label: "组织名称",
                  prop: "deptName",
                  slot: true,
                  display: false
                },
                 {
                  label: "用户姓名",
                  prop: "realName",
                  search: true,
                  rules: [{
                    required: true,
                    message: "请输入用户姓名",
                    trigger: "blur"
                  }, {
                    min: 2,
                    max: 5,
                    message: '姓名长度在2到5个字符'
                  }]
                },
                {
                  label: "用户性别",
                  prop: "sex",
                  type: "select",
                  dicData: [
                    {
                      label: "男",
                      value: '1'
                    },
                    {
                      label: "女",
                      value: '2'
                    },
                    {
                      label: "未知",
                      value: '-1'
                    }
                  ],
                },

                {
                  label: "手机号码",
                  prop: "phone",
                  overHidden: true,

                },
                {
                  label: "巡查任务",
                  prop: "patrolRecord"
                },
                 {
                  label: "上报事件",
                  prop: "conflictsResolve"
                },
                 {
                  type: "daterange",
                  label: "统计时段",
                  span: 8,
                  format: "yyyy-MM-dd",
                  valueFormat: "yyyy-MM-dd",
                  prop: "timeRange",
                  searchRange: true,
                  hide: true,
                  addDisplay: false,
                  editDisplay: false,
                  viewDisplay: false,
                  search: true,
                },
                 {
                  label: "查询开始",
                  prop: "biginDate",
                  hide: true,
                },
                {
                  label: "查询结束",
                  prop: "endDate",
                  hide: true,
                },
              ],
        },
        data: [],
        patrolRecordForm: {},
         pageScope: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        patrolRecordOption: {
             indexLabel: "序号",
              menu: false,
              selection:false,
              height: 'auto',
              calcHeight: 180,
              tip: false,
              searchShow: true,
              searchMenuSpan: 6,
              border: true,
              index: true,
              viewBtn: false,
              addBtn: false,
              editBtn: false,
              delBtn:false,
              dialogClickModal: false,
              header:false,
              column: [

                {
                   label: "开始时间",
                   prop: "startTime",

                },
                {
                  label: "结束时间",
                  prop: "endTime",
                },
                {
                  label: "巡查起点",
                  prop: "startLocation"
                },
                {
                  label: "巡查重点",
                  prop: "endLocation"
                }
              ]
        },
        dataScope: [],
        //事件
         conflictsForm: {},
         pageScope2: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        conflictsOption: {
             indexLabel: "序号",
              menu: false,
              selection:false,
              height: 'auto',
              calcHeight: 180,
              tip: false,
              searchShow: true,
              searchMenuSpan: 6,
              border: true,
              index: true,
              viewBtn: false,
              addBtn: false,
              editBtn: false,
              delBtn:false,
              dialogClickModal: false,
              dialogType: 'dialog',
              header:false,
              column: [

                {
                   label: "标题",
                   prop: "title",
                   overHidden: true

                },
                {
                  label: "内容",
                  prop: "content",
                  overHidden:true,
                },
                {
                  label: "上报部门",
                  prop: "deptName"
                },
                {
                  label: "事件分类",
                  prop: "classifName",
                },

                {
                  label: "状态",
                  prop: "state",
                  dicData: [
                    {
                      label: "待处理",
                      value: "0"

                  },
                  {
                    label: "已办理",
                    value: "1"
                  }
                  ]
                }
              ]
        },
        dataScope2: []
      };
    },
    computed: {
      ...mapGetters(["userInfo", "permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.user_add, false),
          viewBtn: this.vaildData(this.permission.user_view, false),
          delBtn: this.vaildData(this.permission.user_delete, false),
          editBtn: this.vaildData(this.permission.user_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
    },
    mounted() {
      // 非租户模式默认加载管理组数据
      if (!website.tenantMode) {
        this.initData(website.tenantId);
      }
    },
    methods: {
      addClass({columnIndex}){
                if(columnIndex === 6 || columnIndex === 7){
                  return 'cell-blue'
                }
            },
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      initData(tenantId) {
        getRoleTree(tenantId).then(res => {
          const column = this.findObject(this.option.column, "roleId");
          column.dicData = res.data.data;
        });
        getDeptTree(tenantId).then(res => {
          const column = this.findObject(this.option.column, "deptId");
          column.dicData = res.data.data;
        });
      },

      handleDrawerClose(hide) {
        hide();
      },
      beforeOpenScope(done) {
        done();
      },
      searchReset() {
        this.query = {};
        this.treeDeptId = '';
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },

      beforeOpen(done) {
        this.initFlag = true;
        done();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        const {timeRange} = params;
        let values = {
          ...params,
        };
        if (timeRange) {
          values = {
            ...params,
            beginDate: timeRange[0],
            endDate: timeRange[1],
          };
          values.timeRange = null;
          this.query.timeRange = null;
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(values, this.query), this.treeDeptId).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
//表格点击事件
      handleCell(row,column){

        if(column.label=="巡查任务") {
         this.patrolRecordBox = true;
         this.userId = row.id;
         this.beginDate = row.beginDate;
         this.endDate = row.endDate;
         this.onLoadScope(this.pageScope);
        }
        if(column.label=="上报事件") {
         this.conflictsBox = true;
         this.userId = row.id;
         this.beginDate = row.beginDate;
         this.endDate = row.endDate;
         this.onLoadScope2(this.pageScope);
        }
      },
       onLoadScope(page) {
         const userId = this.userId;
         const beginDate = this.beginDate;
         const endDate = this.endDate;
        getPatrolList(page.currentPage, page.pageSize,userId,beginDate,endDate).then(res => {
          const data = res.data.data;
          console.log(data);
          this.pageScope.total = data.total;
          this.dataScope = data.records;
          this.selectionListScope = [];
        });
      },
       onLoadScope2(page) {
         const userId = this.userId;
         const beginDate = this.beginDate;
         const endDate = this.endDate;
        getConflictsList(page.currentPage, page.pageSize,userId,beginDate,endDate).then(res => {
          const data = res.data.data;
          console.log(data);
          this.pageScope2.total = data.total;
          this.dataScope2 = data.records;
          this.selectionListScope = [];
        });
      }
    }
  };
</script>

<style>
  .box {
    height: 800px;
  }

  .el-scrollbar {
    height: 100%;
  }

  .box .el-scrollbar__wrap {
    overflow: scroll;
  }
   .cell-blue{
        color: blue!important;
        cursor: pointer;
    }
</style>
